<template name="transfers">
  <div class="transfers">
    <h1>{{_ "grains.grainlist.sandstormGrainListPage.transfers.transfers"}}</h1>

    {{#if showLogin}}
      <div class="login">
        {{> loginButtonsDialog accountsUi=globalAccountsUi}}
      </div>
    {{else}}

    {{#with blockedInitiate}}
      <div class="flash-message error-message">
        {{_ "grains.grainlist.sandstormGrainListPage.transfers.blockedInitiateBeforeSource"}}
        {{source}}{{_ "grains.grainlist.sandstormGrainListPage.transfers.blockedInitiateAfterSource"}}
      </div>
    {{/with}}

    {{#with incoming}}

      <h2>{{_ "grains.grainlist.sandstormGrainListPage.transfers.incomingTransferActive"}}</h2>

      <p>
        {{#unless isAllDone}}
          <button class="cancel">{{_ "grains.grainlist.sandstormGrainListPage.transfers.cancel"}} {{#if isAnyDone}}{{_ "grains.grainlist.sandstormGrainListPage.transfers.remaining"}}{{/if}} {{_ "grains.grainlist.sandstormGrainListPage.transfers.transfer"}}</button>
        {{/unless}}
        {{#if isAnyErrored}}
          <button class="clear-errors">{{_ "grains.grainlist.sandstormGrainListPage.transfers.retryErrors"}}</button>
        {{/if}}

        {{#if isAnyDownloading}}
          <button class="pause">{{_ "grains.grainlist.sandstormGrainListPage.transfers.pauseTransfer"}}</button>
        {{else}}{{#if isAnyReady}}
          <button class="start">{{#if isAnyStarted}}{{_ "grains.grainlist.sandstormGrainListPage.transfers.continueTransfer"}}{{else}}{{_ "grains.grainlist.sandstormGrainListPage.transfers.startTransfer"}}{{/if}}</button>
        {{else}}{{#if isAllDone}}
          <button class="finish">{{_ "grains.grainlist.sandstormGrainListPage.transfers.closeTransfer"}}</button>
        {{/if}}
        {{/if}}
        {{/if}}</p>

      <table class="grain-list">
        <thead>
          <tr>
            <td class="select-all-grains">
              <input title={{selectAllTitle}} type="checkbox" checked={{selectAllChecked}}>
            </td>
            <td class="td-state"></td>
            <td class="td-app-icon"></td>
            <td class="grain-name">
              {{_ "grains.grainlist.sandstormGrainTable.tableHeader.title"}}
            </td>
            <td class="grain-size">
              {{_ "grains.grainlist.sandstormGrainTable.tableHeader.size"}}
            </td>
            <td class="last-used">
              {{_ "grains.grainlist.sandstormGrainTable.tableHeader.lastUsed"}}
            </td>
          </tr>
        </thead>
        <tbody>
          {{#each grains}}
          <tr>
            <td class="select-grain">
              <input type="checkbox" checked={{selected}}>
            </td>
            <td class="td-state">
              {{#if downloading}}
                <div class="state-downloading" title="Transferring..."></div>
              {{else}}
              {{#if error}}
                <div class="state-error" title="{{error}}"></div>
              {{else}}
              {{#if localGrainId}}
                <div class="state-done" title="Done"></div>
              {{/if}}
              {{/if}}
              {{/if}}
            </td>
            <td class="td-app-icon">
              {{#with appInfo}}
                <div class="app-icon" title="{{appTitle}}"
                    style="background-image: url('{{ iconSrc }}');">
                </div>
              {{else}}
                <div class="app-icon" title="Unknown App">
                  ?
                </div>
              {{/with}}
            </td>
            <td class="grain-name">
              <a href="{{grainSourceUrl}}" target="_blank">{{title}}</a>
            </td>
            <td class="grain-size">{{grainSize}}</td>
            <td class="last-used">
              {{#if isNewShare}}
                {{_ "grains.grainlist.sandstormGrainTable.tableBody.new"}}
              {{else}}
                {{dateString lastUsed}}
              {{/if}}
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>

    {{else}}
    {{#with outgoing}}
      <h2>{{_ "grains.grainlist.sandstormGrainListPage.transfers.outgoingTransferActive"}}</h2>

      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.currentlyTransferring"}} <a href="{{destination}}" target="_blank">{{destination}}</a></p>
      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.manageAt"}} <a href="{{destination}}/transfers" target="_blank">{{destination}}/transfers</a></p>
      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.inOrder"}}</p>
      <p><button class="cancel">{{_ "grains.grainlist.sandstormGrainListPage.transfers.cancelTransfer"}}</button></p>

    {{else}}
    {{#with initiate}}
      <h2>{{_ "grains.grainlist.sandstormGrainListPage.transfers.initiateInboundTransfer"}}</h2>

      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.theSandstormServerAt"}} <strong>{{source}}</strong> {{_ "grains.grainlist.sandstormGrainListPage.transfers.wantsToTransfer"}}</p>
      {{#if isInsecure source}}
        <div class="flash-message warning-message">
          {{_ "grains.grainlist.sandstormGrainListPage.transfers.insecureSource"}}
        </div>
      {{/if}}
      <p><button class="deny">{{_ "grains.grainlist.sandstormGrainListPage.transfers.deny"}}</button> <button class="continue">{{_ "grains.grainlist.sandstormGrainListPage.transfers.fetchGrainList"}} &raquo;</button></p>

    {{else}}
      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.noTransfersInProgress"}}</p>
      <h2>{{_ "grains.grainlist.sandstormGrainListPage.transfers.initiateOutboundTransfer"}}</h2>
      <form class="initiate">
        <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.transferAllMyGrainsTo"}}<br>
          <input type="text" name="destination" placeholder="https://example.sandcats.io">
          <button type="submit">{{_ "grains.grainlist.sandstormGrainListPage.transfers.initiateTransfer"}}</button></p>
      </form>
      <h2>{{_ "grains.grainlist.sandstormGrainListPage.transfers.whatDoesThisDo"}}</h2>
      <p>{{_ "grains.grainlist.sandstormGrainListPage.transfers.whatCan"}}</p>
      <p>{{{_ "grains.grainlist.sandstormGrainListPage.transfers.whatWhen"}}}</p>
      <p>{{{_ "grains.grainlist.sandstormGrainListPage.transfers.whatOrder"}}}</p>
    {{/with}}
    {{/with}}
    {{/with}}
    {{/if}}
  </div>
</template>
